<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div class="clearfix">
        <p class="fl">请求信息：</p>
        <p class="reqInfo">{{ reqInfo }}</p>
      </div>
      <div class="returnBox clearfix">
        <p class="fl">返回信息：</p>
        <p class="returnInfo">{{ returnInfo }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'logDetail',

  data() {
    return {
      titleText: '日志详情',
      returnInfo: '',
      reqInfo: '',
      back: true,
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.axios({
        method: 'post',
        url: '/api-su/bankdata/logdetail',
        data: { id: this.$route.query.id },
      })
        .then((res) => {
          this.reqInfo = res.data.result.request
          this.returnInfo = res.data.result.response
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    goBack() {
      this.$router.push('/home/bankdata/loglist')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/bankdata/loglist',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  padding-left: 24px;
  padding-right: 24px;
  height: calc(100% - 67px);
  overflow-y: auto;
}
.returnBox {
  margin-top: 24px;
}
.reqInfo,
.returnInfo {
  display: inline-block;
  height: 300px;
  width: 80%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  overflow-y: auto;
  word-break: break-all;
}
</style>
